<html>
	<head>
		<wicket:head>
		<style>
			.todoListPanel{
				margin-left:20px;
				border:1px solid #deddef;
				width: 470px;
			}
			
			.todoListHead{
				color:#999999;
				font-size:13px;
				font-weight:bold;
			}
			
			.todoItem{
			}
			
			.todoPanel{
				border-botttom: 1px solid #DDDDDD; 
				margin-left: auto;
				margin-right: auto;
				width: 400px;
			}
			</style>
		</wicket:head>
	</head>

	<body>
		<wicket:panel>
        	<div class="todoListPanel">
				<form wicket:id="form">
				<div class="clearfix" style="width:400px; margin:auto; padding: 5px; margin-bottom:5px; border-bottom: 1px dotted #666;">
					<div class="todoListHead" style="float:left;">
						Join Requests
					</div>
					<div style="float:right;">
						<button style="margin: 0px 5px;" class="es-button ui-state-default ui-corner-all" wicket:id="acceptAll">Accept All</button>
						<button style="margin: 0px 5px;" class="es-button ui-state-default ui-corner-all" wicket:id="declineAll">Decline All</button>
					</div>
				</div>
				<div class="todoPanel clearfix" wicket:id="reqItem">
					<div class="clearfix">
						<div style="float:left;">
							<div wicket:id="user">user badge here!!</div>
						</div>
						<div style="float:left; margin:5px 20px;">
							<div><button style="margin: 5px 0px;" class="es-button ui-state-default ui-corner-all" wicket:id="accept" href="#">Accept</button></div>
							<div><button style="margin: 5px 0px;" class="es-button ui-state-default ui-corner-all" wicket:id="decline" href="#">Decline</button></div>
						</div>
					</div>
				</div>
				</form>
			</div>
		</wicket:panel>	
	</body>
</html>